<template>
  <div class="about">
    <el-form :inline="true"
             :model="formInline"
             class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.user"
                  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="账户余额">
        <el-input v-model="formInline.money"
                  placeholder="请输入用户名"></el-input>
        <el-input v-model="formInline.money2"
                  placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info"
                   @click="chongzhi">重置</el-button>
        <el-button type="primary"
                   @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData"
              border
              style="width: 60%">
      <el-table-column fixed
                       prop="date"
                       label="日期"
                       width="150">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="province"
                       label="省份"
                       width="120">
      </el-table-column>
      <el-table-column prop="city"
                       label="市区"
                       width="120">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       width="300">
      </el-table-column>
      <el-table-column prop="zip"
                       label="邮编"
                       width="120">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看</el-button>
          <el-button type="text"
                     @click="bianji(scope.row)"
                     size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示"
               :visible.sync="dialogVisible"
               width="30%">
      <div>
        我是编辑的弹框
        {{detail.city}}
        {{detail.name}}
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示"
               :visible.sync="showBianji"
               width="30%">
      <div>
        我是编辑的弹框
        <el-form :model="newBianji">
          <el-form-item label="城市">
            <el-input v-model="newBianji.city"></el-input>
          </el-form-item>
          <el-form-item label="名字">
            <el-input v-model="newBianji.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="showBianji = false">取 消</el-button>
        <el-button type="primary"
                   @click="showBianji = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      formInline: {
        user: '',
        money: '',
        money2: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },
      {
        date: '2016-05-02',
        name: 'zhangshan',
        province: 'huaibu',
        city: 'anhui',
        address: '111111111 1518 弄',
        zip: 200333
      }

      ],
      dialogVisible: false,
      showBianji: false,
      detail: {},// 查看详情的具体内容
      newBianji: {}
    }
  },
  methods: {
    chongzhi() {
      this.formInline = {}
    },
    query() {
      console.log(this.formInline);
      // 网络请求
      // 设置tabledata
    },
    // 查看
    handleClick(detail) {
      console.log(detail);
      this.detail = detail
      console.log(this.detail);
      this.dialogVisible = true
    },
    // 编辑
    bianji(row) {
      console.log(row);
      this.newBianji = row
      this.showBianji = true
    }
  }
}
</script>

